<template>
	<view class="app-conatianer">
		<tn-navbar back-text="在线客服" text-color="#333" fixed :bottom-shadow="false" bg-color="#fff"></tn-navbar>
		<view class="app-main">
			<view class="c-m-t-10 c-flex c-flex-nowrap c-row-center c-col-center">
				<view class="welcome">
					<text class="font-size-12 color-9999">欢迎您的咨询，期待为您服务</text>
				</view>
			</view>
			<view class="c-m-t-10 c-flex c-flex-nowrap c-row-center c-col-center">
				<view class="welcome">
					<text class="font-size-12 color-9999">小花为您服务</text>
				</view>
			</view>
			<view class="c-m-t-10 c-flex c-flex-nowrap c-row-center c-col-center">
				<view class="time welcome">
					<text class="font-size-12 color-8287">2019年12月29日 12:59</text>
				</view>
			</view>
			<view class="other c-flex c-col-top c-flex-nowrap c-p-l-10 c-m-t-10">
				<view class="c-flex c-col-top c-row-left">
					<image class="chat-avator"
						src="https://img.axureshop.com/4d/70/de/4d70de7a01724a518886e314f1a03985/images/%E5%9C%A8%E7%BA%BF%E5%AE%A2%E6%9C%8D/u16849.svg">
					</image>
				</view>
				<view class="other-max c-m-l-10">
					<view class="other-content">
						<text>您好！小花很高兴为您服务~活动期间咨询人数较多，请您耐心等候！</text>
					</view>
					<view class="c-m-t-5 c-flex c-row-right c-col-center">
						<text class="font-size-12 color-cccc">已读</text>
					</view>
				</view>
			</view>
			<view class="self c-flex c-col-top c-flex-nowrap c-row-right c-p-r-10 c-m-t-10">
				<view class="self-max c-m-r-10">
					<view class="other-content self-content">
						<text>什么时候可以发货？</text>
					</view>
					<view class="c-m-t-5 c-flex c-row-right c-col-center">
						<text class="font-size-12 color-cccc">已读</text>
					</view>
				</view>
				<view class="c-flex c-col-top c-row-right">
					<image class="chat-avator"
						src="https://img.axureshop.com/4d/70/de/4d70de7a01724a518886e314f1a03985/images/%E5%9C%A8%E7%BA%BF%E5%AE%A2%E6%9C%8D/u16854.svg">
					</image>
				</view>				
			</view>
		</view>
		<view class="app-footer">
			<view class="footer-input pos-rel c-flex c-flex-nowrap">
				<view class="footer-left c-flex c-row-center c-col-center">
					<tn-icon name="voice-fill" size="48rpx" color="#2c2c2c" />
				</view>
				<view class="c-flex-divide c-flex c-flex-nowrap c-row-center c-col-center">
					<input v-model="keyword" placeholder="请输入" class="cu-clzz" :placeholder-style="pStyleValue">
				</view>
				<view class="footer-right c-flex c-flex-nowrap">
					<view class="c-flex-divide c-flex c-row-center c-col-center">
						<tn-icon name="service-fill" size="48rpx" color="#2c2c2c" />
					</view>
					<view class="c-flex-divide c-flex c-row-center c-col-center">
						<tn-icon name="add-square" size="48rpx" color="#2c2c2c" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue'
	const keyword = ref<string>('')
	const pStyle : { [x : string] : string | number } = {
		'color': 'rgb(215, 215, 215)',
		'font-weight': 400,
		'font-style': 'normal',
		'font-size': '28rpx',
		'letter-spacing': 'normal',
	}

	const pStyleValue = computed(() => {
		return Object.keys(pStyle).map((key : string) => {
			return key + ':' + pStyle[key]
		}).join(';')
	})
</script>

<style scoped lang="scss">
	.app-conatianer {
		height: 100vh;
		background: $uni-bg-color;
	}

	.app-main {
		padding-bottom: 100rpx;
	}

	.app-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 3;

		.footer-input {
			height: 100rpx;
			border-top: 1px solid rgb(242, 242, 242);

			.footer-left {
				width: 100rpx;
			}

			.footer-right {
				width: 200rpx;

			}
		}
	}

	.cu-clzz {
		width: 100%;
		height: 70rpx;
		border: 1px solid rgba(215, 215, 215, 1);
		border-radius: 35rpx;
		font-weight: 400;
		font-style: normal;
		font-size: 28rpx;
		letter-spacing: normal;
		color: #000000;
		vertical-align: none;
		text-align: left;
		text-transform: none;
		background-color: transparent;
		padding: 0 35rpx;
	}

	.welcome {
		background-color: rgba(242, 242, 242, 1);
		padding: 4rpx 20rpx;
		border-radius: 25%;

		&.time {
			background-color: rgba(228, 228, 228, 0);
		}
	}

	.chat-avator {
		width: 72rpx;
		height: 72rpx;
	}

	.other-content {
		max-width: 540rpx;
		padding: 20rpx 40rpx 20rpx 40rpx;
		background-color: rgba(255, 255, 255, 1);
		box-sizing: border-box;
		border-width: 1px;
		border-style: solid;
		border-color: rgba(228, 228, 228, 1);
		border-radius: 10rpx;
		box-shadow: none;
		font-weight: 400;
		font-style: normal;
		color: #999999;
		text-align: left;
		line-height: 48rpx;
		
		&.self-content {
			background-color: rgba(97, 100, 255, 1);
			color: #fff;
		}
	}
	
</style>